<template>
  <div>
    <h1>详情页面</h1>

    <p>水果参数 id : {{ id }}</p>
    <p>水果参数 name : {{ name }}</p>

    <!-- 
      问题：有时我们的参数会非常的多，模板中 各种 $route.params.xxx 就会很麻烦。如何解决？

     -->
    <!-- <p>水果参数 price : {{ $route.params.name }}</p>
    <p>水果参数 num : {{ $route.params.name }}</p>
    <p>水果参数 营养价值 : {{ $route.params.name }}</p> -->

    <!-- ... -->
  </div>
</template>

<script>
export default {
  props: ["id", "name"],
  created() {
    // console.log(this.$route);
  },
};
</script>
